<template>
  <div v-if="fileData.length" class="enclosure">
    <h4>相关附件</h4>
    <div class="file-list">
      <div
        v-for="(file, index) in fileData"
        :key="index"
        class="file-item"
        :class="'file_' + file.fileType"
        @click="downloadFileHandle(file.link)"
      >
        <span class="file-icon"></span>
        <span class="file-name">{{ file.fileName }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { FileHandle } from '@/units'
const { parseFileUrl, downloadFile, handleBatchDownload } = FileHandle()

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
})
const fileData = computed(() => {
  const downloadData = []
  props.data.map((item) => {
    let file = parseFileUrl(item)
    file = { ...file, link: item }
    downloadData.push(file)
  })
  return downloadData
})
const downloadFileHandle = (file) => {
  downloadFile(file)
}
</script>
<style scoped>
.enclosure {
  margin-top: 25px;
}

.enclosure h4 {
  font-size: 20px;
  font-family: Source Han Sans CN-Bold;
  font-weight: bold;
  color: #00165d;
  margin-bottom: 16px;
}
.file-list {
}
.file-item {
  display: flex;
  align-items: center;
  color: #206ef2;
  line-height: 28px;
  cursor: pointer;
  margin-bottom: 10px;
}
.file-item .file-icon {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-image: url('@/assets/images/file/2359.png');
  background-size: 24px;
}
.file-item .file-name {
  padding-left: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* text-decoration: underline; */
}
.file_word .file-icon {
  background-image: url('@/assets/images/file/word.png');
}
.file_excel .file-icon {
  background-image: url('@/assets/images/file/excel.png');
}
.file_ppt .file-icon {
  background-image: url('@/assets/images/file/ppt.png');
}
.file_pdf .file-icon {
  background-image: url('@/assets/images/file/pdf.png');
}
.file_image .file-icon {
  background-image: url('@/assets/images/file/image.png');
}
.file_gif .file-icon {
  background-image: url('@/assets/images/file/gif.png');
}
.file_zip .file-icon {
  background-image: url('@/assets/images/file/zip.png');
}
.file_video .file-icon {
  background-image: url('@/assets/images/file/video.png');
}
</style>
